<template>
	<view>
		<view v-if="inPorcessOrderId != null" class="order-process" @click="toOrder">您有进行中的订单,点击查看</view>
		
		<map id="map" :longitude="from.longitude" :latitude="from.latitude" :style="contentStyle" scale="15" :enable-traffic="false" :show-location="true" :enable-poi="true" class="map">
			<cover-image class="location" src="../../static/workbench/location.png" @tap="toLocationHandle()"></cover-image>
		</map>
		<view class="panel">
			<view class="from" @tap="chooseLocationHandle('from')">
				<text>{{ from.address }}</text>
			</view>
			<view class="dashed-line"></view>
			<view class="to" @tap="chooseLocationHandle('to')">
				<text>{{ to.address }}</text>
			</view>
			<button class="btn" @tap="toCreateOrderHandle">查看路线</button>
		</view>
	</view>
</template>

<script>
	
import GtPush from '../../lib/gtpush-min.js'
	//地图点选插件
const chooseLocation = requirePlugin('chooseLocation');
let QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
let qqmapsdk ;

export default {
	data() {
		return {
			//开始位置
			from: {
				address: '输入你的开始位置',
				longitude: 0,
				latitude: 0
			},
			//结束位置
			to: {
				address: '输入你的目的地', 
				longitude: 0,
				latitude: 0
			},
			
			//窗口样式
			contentStyle: '',
			windowHeight: 0,
			//地图对象
			map: null,
			//标记:开始位置点选或者结束位置点选
			chooseFromOrToflag: null,
			inPorcessOrderId:null,
			chooseType:"",
		};
	},
	methods: {
		//初始化个推
		initGtPush(){
			let _this = this;
			//初始化推送SDK
			  GtPush.init({
			    appid: 'GJOmMrKCojAR5FA3B2GUT2',
			    onClientId: (res) => {
			      //个推ClientId回调，拿到cid后将其上报到服务端
			      console.info(`onClientId: ${res.cid}`)
				  _this.post("/common/app/pay/getui/" +res.cid,(res) => {
					  
				  } )
			  },
			
			  onlineState: (data) => {
			    //个推ClientId在线状态回调
			    console.info(`onlineState: ${data.online}`)
			  },
			
			  onPushMsg: (res) => {
			    //推送消息回调
			    console.info(`onPushMsg`, res.message)
				//string转 object
				let message = JSON.parse(res.message);
				if(message.type === 1){
					uni.navigateTo({
						url:"/pages/order/order?orderNo=" + message.orderNo
					})
				}
				
			  },
			
			  onError: (res) => {
			    //错误回调
			    console.info(`onError`, res.error)
			  }
			})
		},
		//页面刷新 回显
		flushOrder(){
			let _this = this;
			_this.get("/order/app/customer/flush",(res) => {
				let {success,data,message} = res.data;
				if(success){
					//根据订单状态跳转不同的页面
					if(data.status === _this.Consts.OrderStatus.ORDER_STATUS_WAIT){
						//待接单 跳转创建订单页
						uni.navigateTo({
							url:"/pages/create_order/create_order?orderNo=" + data.orderId
						})
					}else if(data.status === _this.Consts.OrderStatus.ORDER_STATUS_ACCEPTED 
							|| data.status === _this.Consts.OrderStatus.ORDER_STATUS_ARRIVE 
							|| data.status === _this.Consts.OrderStatus.ORDER_STATUS_START_DRIVING){
						//接客户 到达代驾点 开始代驾  跳转到司乘同显页
						uni.navigateTo({
							url:"/pages/move/move?orderNo=" + data.orderId
						})
					}else if(data.status === _this.Consts.OrderStatus.ORDER_STATUS_COMPLETE_DRIVED 
							|| data.status === _this.Consts.OrderStatus.ORDER_STATUS_ENSURE 
							|| data.status === _this.Consts.OrderStatus.ORDER_STATUS_NOT_PAY){
						//结束代驾 确认订单 未支付 跳转到订单详情页
						uni.navigateTo({
							url:"/pages/order/order?orderNo=" + data.orderId
						})
					}
				}else{
					uni.showToast({
						title:message,
						icon:'error'
					})
				}
			})
		},
		//跳转到路线规划页面
		toCreateOrderHandle(){
			let _this = this;
			if(_this.to.latitude === 0 || _this.to.longitude ===0){
				uni.showToast({
					title:"位置不能为空",
					icon:"error"
				})
				return;
			}
			uni.setStorageSync("location",{
				from:_this.from,
				to:_this.to
			})
			uni.navigateTo({
				url:"/pages/create_order/create_order"
			})
			
		},
		//地图位置选点
		chooseLocationHandle(type){
			let _this = this;
			_this.chooseType = type;
			wx.navigateTo({
			  url: 'plugin://chooseLocation/index?key=' + _this.Consts.QQMAP_KEY + '&referer=飞驰' 
			});
			
		},
		
		//初始化组件
		initModule(){
			let _this = this;
			//初始化地图
			_this.map = uni.createMapContext("map",this);
			qqmapsdk = new QQMapWX({
				key: _this.Consts.QQMAP_KEY
			});
		
			//初始化样式
			let windowHeight = uni.getSystemInfoSync().windowHeight;
			_this.windowHeight = windowHeight ;
			_this.contentStyle = `height:${_this.windowHeight}px;`;
		},
		//移动到当前位置
		toLocationHandle(){
			let _this = this;
			_this.map.moveToLocation({
				latitude:_this.from.latitude,
				longitude:_this.from.longitude,
			})
		},
		//获取经纬度
		getLcation(){
			let _this = this;
			uni.getLocation({
				type: 'gcj02',
				highAccuracyExpireTime:6000,
				isHighAccuracy:true,
				success: function (res) {
					//纬度
					_this.from.latitude = res.latitude;
					//经度
					_this.from.longitude = res.longitude;
					_this.reverseGeocoder(res.longitude,res.latitude)
				}
			});
		},
		//将经纬度转为地址
		reverseGeocoder(longitude,latitude){
			let _this = this;
			qqmapsdk.reverseGeocoder({
				location: {
				  latitude: latitude,
				  longitude: longitude
				},
				success: function(res) {
					//成功后的回调
					_this.from.address = res.result.address;
				
				}
			})
		}
		
		
	},
	onShow: function() {
		let _this = this;
		
		//........
		const location = chooseLocation.getLocation();
		if(_this.chooseType === 'from'){
			console.log(location);
			_this.from.address = location.address;
			_this.from.latitude = location.latitude;
			_this.from.longitude = location.longitude;
			console.log(_this.from);
		}else if(_this.chooseType === 'to'){
			_this.to.address = location.address;
			_this.to.latitude = location.latitude;
			_this.to.longitude = location.longitude;
		}
		 
		_this.flushOrder();
		
	},
	onHide: function() {
	},
	onLoad: function() {
		let _this = this;
		_this.getLcation();
		_this.initModule();
		_this.initGtPush();
	},
	onUnload: function() {
		
	}
};
</script>

<style lang="less">
@import url('workbench.less');
</style>
